<template>
  <div class="goods-wrapper">
    <div class="goods-list">
      <div
        class="goods-item"
        v-for="item in goodsList"
        :key="item.ID"
        @click="go(item)"
      >
        <img :src="item.pic[0].pic" />

        <div class="title-wrapper">
          <div class="title">
            {{ item.title }}
          </div>

          <div class="desc-wrapper">
            <span>{{ item.c_product_info.name }}</span>
            <span>{{ item.c_work_info.name }}</span>
          </div>
        </div>
      </div>

      <div class="empty-item" v-for="item in emptyItemLength" :key="item"></div>
    </div>
  </div>
</template>

<script>
import storage from "@/utils/storage";

export default {
  props: {
    goodsList: {
      type: Array,
      default: () => []
    }
  },
  computed: {
    emptyItemLength() {
      return 5 - (this.goodsList.length % 5);
    }
  },
  methods: {
    go(item) {
      storage.setItem("GOODS_ITEM", item);
      this.$router.push({
        path: this.$route.path + "/" + item.ID
      });
    }
  }
};
</script>
<style lang="less" scoped>
.goods-wrapper {
  .goods-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;

    .empty-item {
      width: 230px;
    }

    .goods-item {
      width: 230px;
      border: 1px solid @border-color;
      border-radius: 4px;
      overflow: hidden;
      margin-bottom: 24px;
      cursor: pointer;
      img {
        width: 230px;
        height: 230px;
        object-fit: cover;
      }

      .title-wrapper {
        padding: 12px;
      }

      .title {
        font-size: 17px;
      }

      .desc-wrapper {
        color: @text-color-2;
        margin-top: 4px;

        span {
          margin-right: 12px;
        }
      }
    }
  }
}
</style>
